<template>
  <div class="jian20">
    <div class="content">
      <div class="name">初教-6</div>
      <div class="title">结构简介</div>
      <img
        class="plan"
        src="https://p3.ssl.qhimg.com/t01e6fa0e84bd895ae1.png"
      />

      <div class="width">翼展：10.18米</div>
      <div class="height">机长：8.46米</div>

      <div class="area">
        活塞-6<br />（HS-6）<br />星型气冷<br />9缸发动机

        <div class="line"></div>
      </div>

      <div class="enter">
        翼面积：17平方米

        <div class="line"></div>
      </div>

      <div class="zhong1">起飞重量：1419千克</div>
      <div class="zhong1" style="top: 35vw">空重：1172千克</div>
    </div>

    <div class="text">
      <div class="left" style="width: 100%">
        <div class="title">
          <div></div>
          历史背景
        </div>

        <div class="item">
          <div class="dot"></div>
          <div class="item-text">
            从20世纪50年代初到1957年，中国南昌飞机制造厂（320厂）仿制的苏联雅克-18初级教练机已交付空军200多架。但随着中国空军的装备更新，部队大量使用前三点起落架的米格-15等战斗机。空军感到，雅克-18采用后三点起落架，与采用前三点的乌米格-15喷气教练机相差太远，从雅克-18直上喷气高级教练机有困难。加之雅克-18是骨架蒙布结构，飞行设备很落后。因此，从空军训练体制上，要求改进雅克-18或者重新设计一种初级教练机，以便与歼教-1、乌米格-15等喷气教练机衔接。而且雅克-18的电功率不够，无法采用国产的超短波电台。
          </div>
        </div>

        <div class="item">
          <div class="dot"></div>
          <div class="item-text">
            1957年第四季度，中国第一架自行设计的两侧进气喷气式歼击教练机歼教-1正式完成打样设计，并进入工程详图设计。为了适应空军发展需要，中国机械工业部四局（简称：机械部四局）提出研制一种性能超过雅克-18的全金属结构的前三点起落架螺旋桨初级教练机。
          </div>
        </div>
      </div>
    </div>

    <div class="text">
      <div class="left" style="width: 100%">
        <div class="title">
          <div></div>
          总体设计
        </div>

        <div class="item">
          <div class="dot"></div>
          <div class="item-text">
            机翼：全金属双梁下单翼，分为中央翼，左、右外翼三段。中央梁与机身固定在一起，外翼与中央翼为可拆卸式连接。右外翼装有空速管。机翼后缘装有普通襟翼和副翼，外翼上反角7°。
          </div>
        </div>

        <div class="item">
          <div class="dot"></div>
          <div class="item-text">
            机身：头部设置发动机舱，为梁式承力结构，外面有发动机罩。整个机身为全金属半硬壳结构，外型光滑。
          </div>
        </div>

        <div class="item">
          <div class="dot"></div>
          <div class="item-text">
            尾翼：由水平安定面、升降舵、垂直安定面、方向舵和整流包皮组成。都是普通梁、桁、肋结构。方向舵和升降舵都有调整片。
          </div>
        </div>

        <div class="item">
          <div class="dot"></div>
          <div class="item-text">
            起落架：可收放前三点起落架，前起落架为半收放支柱设计，向后收入前机身内。主起落架为半摇臂设计，向内收入中央翼的起落架舱。主起落架的减震器适于在草地机场起降，采用中压轮胎，主轮采用无源刹车。
          </div>
        </div>

        <div class="item">
          <div class="dot"></div>
          <div class="item-text">
            座舱：座舱分为前舱和后舱，前舱为学员舱，舱盖由前风挡、前活动舱盖、中固定舱盖及后活动舱盖组成。前、后舱有联动的飞机和发动机双重操纵机构和各种指示仪器与特种设备。起落架的收放，后舱可以控制前舱。
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
  .jian20 {
    background-image: url(../assets/WechatIMG165.jpg);
    background-size: cover;
    width: 100%;
    height: 100vh;
    overflow: auto;

    .content {
      padding-left: 3vw;
      padding-top: 3vw;
      width: 100%;
      position: relative;
      .name {
        font-size: 3vw;
      }
      .title {
        font-size: 2vw;
      }
      .plan {
        width: 65vw;
        margin-left: 12vw;
        position: relative;
        top: -6vw;
      }

      .width {
        position: absolute;
        left: 50vw;
        width: 30vw;
        text-align: center;
        font-size: 3vw;
        border-bottom: 2px solid yellow;
        top: 8vw;
        transform: rotateZ(80deg);
        transform-origin: left bottom;
        color: #fff;
        &::after {
          content: '';
          position: absolute;
          left: -8px;
          bottom: -7px;
          border-width: 6px;
          border-style: solid;
          border-color: transparent yellow transparent transparent;
        }
        &::before {
          content: '';
          position: absolute;
          right: -8px;
          bottom: -7px;
          border-width: 6px;
          border-style: solid;
          border-color: transparent transparent transparent yellow;
        }
      }

      .height {
        position: absolute;
        left: 21vw;
        width: 45vw;
        text-align: center;
        font-size: 3vw;
        border-bottom: 2px solid yellow;
        top: 15vw;
        transform: rotateZ(-20deg);
        transform-origin: left bottom;
        &::after {
          content: '';
          position: absolute;
          left: -8px;
          bottom: -7px;
          border-width: 6px;
          border-style: solid;
          border-color: transparent yellow transparent transparent;
        }
        &::before {
          content: '';
          position: absolute;
          right: -8px;
          bottom: -7px;
          border-width: 6px;
          border-style: solid;
          border-color: transparent transparent transparent yellow;
        }
      }

      .area {
        position: absolute;
        left: 65vw;
        width: 30vw;
        text-align: center;
        font-size: 3vw;
        border-bottom: 2px solid yellow;
        top: 25vw;

        .line {
          width: 18vw;
          height: 2px;
          background: yellow;
          position: absolute;
          left: -18vw;
          bottom: -2px;
          transform-origin: right bottom;
          transform: rotateZ(80deg);
        }
      }

      .enter {
        position: absolute;
        left: 25vw;
        width: 25vw;
        text-align: center;
        font-size: 3vw;
        border-bottom: 2px solid yellow;
        top: 42vw;

        .line {
          width: 15vw;
          height: 2px;
          background: yellow;
          position: absolute;
          right: -15vw;
          bottom: -2px;
          transform-origin: left bottom;
          transform: rotateZ(-80deg);
        }
      }

      .zhong1 {
        position: absolute;
        left: 0vw;
        width: 25vw;
        text-align: center;
        font-size: 2vw;
        border-bottom: 2px solid yellow;
        top: 28vw;
        transform-origin: left bottom;

        &::before {
          content: '';
          position: absolute;
          right: -8px;
          bottom: -7px;
          border-width: 6px;
          border-style: solid;
          border-color: transparent transparent transparent yellow;
        }
      }
    }

    .text {
      width: 100%;
      display: flex;
      margin-top: 3vw;
      padding-bottom: 5vw;
      overflow: hidden;
      .left {
        width: 50%;
        padding-left: 4vw;
        padding-right: 4vw;
        .title {
          display: flex;
          align-items: center;
          height: 3.5vw;
          font-size: 2.5vw;
          div {
            width: 2vw;
            height: 3.5vw;
            margin-right: 1vw;
            border: 1px solid brown;
            background: yellow;
          }
        }
        .item {
          display: flex;
          margin-top: 1vw;
          .dot {
            width: 1vw;
            height: 1vw;
            background: yellow;
            margin-right: 1vw;
            margin-left: 0.5vw;
            transform: rotateZ(45deg);
            position: relative;
            top: 0.5vw;
          }
          .item-text {
            flex: 1;
            font-size: 1.5vw;
          }
        }

        .bullt {
          position: relative;

          img {
            width: 20vw;
            margin-left: 5vw;
            margin-top: 3vw;
            transform: rotateZ(-70deg);
          }

          .area {
            position: absolute;
            left: 12vw;
            width: 20vw;
            text-align: center;
            font-size: 3vw;
            border-bottom: 2px solid yellow;
            top: 19vw;

            .line {
              width: 10vw;
              height: 2px;
              background: yellow;
              position: absolute;
              left: -10vw;
              bottom: -2px;
              transform-origin: right bottom;
              transform: rotateZ(80deg);
            }
          }
        }

        .plan1 {
          width: 40vw;
        }
        .plan2 {
          width: 30vw;
        }
      }
    }
  }
</style>
